<template>
	<view class="page_wrapper">
		<view class="calc_list_block">
			<view class="calc" v-for="(calc, index) in calcList" :key="index">
				{{calc.firstNum}} {{calc.calcType}} {{calc.secondNum}} = 
			</view>
		</view>
		<view class="btns_block">
			<view class="fcz_btn online_btn" @click="onlineCalcs()">在线测试</view>
			<view class="fcz_btn download_btn" @click="downloadCalcs()">下载试题</view>
		</view>
	</view>
</template>

<script>
	import {request} from '@/utils/request.js'
	export default {
		data() {
			return {
				examId: 0,
				calcList: []
			}
		},
		onLoad(option) {
			this.examId = option.examId
			this.fetchData()
		},
		methods: {
			fetchData() {
				uni.showLoading()
				request.get( 
					'/mathExams/id,' + this.examId, {}
				).then(res => {
					uni.hideLoading()
					console.log(res)
					this.calcList = res.calcLogList
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			},
			onlineCalcs() {
				uni.navigateTo({
					url: '/pages/mathCalcs/onlineTest?examId=' + this.examId
				})
			},
			downloadCalcs() {
				const filePathNew = new Date().getTime() +'.jpeg'
				const url = request.wrapperToken('https://api.fcz.pub/mathExams/' + this.examId + '/export.jpeg')
				uni.downloadFile({
					url: url,
					success: (res) => {
						if (res.statusCode === 200) {
							console.log('下载成功')
							console.log(res.tempFilePath)
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success() {
									uni.showToast({
										 position: "center",
										 icon: "none",
										 title: "图片保存成功，请到手机相册查看"
									})
								 },
								 fail(e) {
									 uni.showModal({
										 content: "保存相册失败，errCode：" + e.errCode + "，errMsg：" + e.errMsg + "，errSubject：" + e.errSubject,
										 showCancel: false
									 });
								 }
							})
						}else{
							console.log('下载失败~~~~~~~~~~~~~~~~~')
						}
					},
					fail(e) {
							console.log('下载失败~~~~~~~~~~~~~~~~fail~')
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.page_wrapper{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	.calc_list_block{
		flex: 1;
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
		overflow: scroll;
		.calc{
			width: 25%;
			height: 50px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.btns_block{
		height: 60px;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0px 20px;
		.fcz_btn{
			height: 40px;
			color: white;
			background-color: #67C23A;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 5px;
		}
		.online_btn{
			flex: 1;
			margin-right: 20px;
		}
		.download_btn{
			flex: 1;
		}
	}
}
</style>
